<template>
	<view class="mypage-container">
		<!-- 自定义头部 -->
		<view class="head"></view>
		<!-- 个人信息模块 -->
		<view class="user-info-box">
			<view class="user-info-top">
				<!-- 头像区域 -->
				<view class="avatar-box">
					<image class="avatar"
						:src="loginInfos.avatar?loginInfos.avatar:'https://yuhengtongda.oss-cn-beijing.aliyuncs.com/temp/xiaozu_1708668672703.png'">
					</image>
					<view class="avatar-text">
						<view class="name">{{loginInfos.realname}}</view>
						<view class="desc">{{getPersonnelType(loginInfos.userIdentity)}}</view>
					</view>
				</view>
				<!-- 箭头二维码 -->
				<view class="arrow-box">
					<view class="qr-code">
						<image src="@/static/my/erweima.png"></image>
					</view>
					<view class="arrow"></view>
				</view>
			</view>
			<!-- 状态 -->
			<view class="user-status">
				<view class="label">
					<span class="add">+</span>
					<span class="text">工作签名</span>
				</view>
				<view class="label label-friends">
					<span class="label-avatar">
						<image src="@/static/my/avatar.jpeg"></image>
					</span>
					<span class="text">1个朋友</span>
				</view>
			</view>
		</view>

		<!-- 服务 -->
		<view class="menu-box">
			<view class="menu-item">
				<view class="menu-item-left">
					<image src="@/static/my/fuwu.png"></image>
					<view class="menu-item-left-text">
						营销版、电销版、进销存版
					</view>
				</view>
				<view class="menu-item-right">
					<view class="arrow-right"></view>
				</view>
			</view>
		</view>

		<!-- 收藏 -->
		<view class="menu-box">
			<view class="menu-item">
				<view class="menu-item-left">
					<image src="@/static/my/shoucang.png"></image>
					<view class="menu-item-left-text">
						公司管理
					</view>
				</view>
				<view class="menu-item-right">
					<view class="arrow-right"></view>
				</view>
			</view>
			<view class="menu-item">
				<view class="menu-item-left">
					<image src="@/static/my/pengyouquan.png"></image>
					<view class="menu-item-left-text">
						登录网页版
					</view>
				</view>
				<view class="menu-item-right">
					<view class="arrow-right"></view>
				</view>
			</view>
			<!-- <view class="menu-item">
				<view class="menu-item-left">
					<image src="@/static/my/kabao.png"></image>
					<view class="menu-item-left-text">
						卡包
					</view>
				</view>
				<view class="menu-item-right">
					<view class="arrow-right"></view>
				</view>
			</view>
			<view class="menu-item">
				<view class="menu-item-left">
					<image src="@/static/my/biaoqing.png"></image>
					<view class="menu-item-left-text">
						表情
					</view>
				</view>
				<view class="menu-item-right">
					<view class="arrow-right"></view>
				</view>
			</view> -->
		</view>

		<!-- 设置 -->
		<view class="menu-box">
			<view class="menu-item">
				<view class="menu-item-left">
					<image src="@/static/my/shezhi.png"></image>
					<view class="menu-item-left-text">
						设置
					</view>
				</view>
				<view class="menu-item-right">
					<view class="arrow-right"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				loginInfos: {}
			}
		},
		onLoad() {
			let loginInfo = uni.getStorageSync('userName');
			this.loginInfos = loginInfo
		},
		methods: {
			getPersonnelType(Type) {
				let statusText = '未知状态'; // 初始化默认状态文本  

				// 根据传入的类型值Type来确定人员类型  
				switch (Type) {
					case 1:
						statusText = '产品销售主管';
						break;
					case 2:
						statusText = '产品销售专员';
						break;
					case 3:
						statusText = '客服专员';
						break;
					case 4:
						statusText = '超级管理员';
						break;
					case 5:
						statusText = '数据专员';
						break;
					case 6:
						statusText = '公司管理';
						break;
					case 7:
						statusText = '社群专员';
						break;

					case 8:
						statusText = '服务主管'; // 请根据实际情况填写类型名称  
						break;
					case 9:
						statusText = '类型9';
						break;
					case 10:
						statusText = '财务专员';
						break;
					case 11:
						statusText = '产品专员';
						break;
					case 12:
						statusText = '售后服务组长';
						break;
					case 13:
						statusText = '售后服务专员';
						break;
					case 14:
						statusText = '医疗服务组长';
						break;
					case 15:
						statusText = '医疗服务专员';
						break;
					case 16:
						statusText = '投放专员';
						break;
					case 17:
						statusText = '直播运营';
						break;
					case 18:
						statusText = '客服主管';
						break;
					case 19:
						statusText = '社群主管';
						break;
					case 20:
						statusText = '客服组长';
						break;
					default:
						statusText = '未知身份' // 或者其他默认状态
						// 如果Type不在1到20的范围内，保持默认状态文本  
						// 或者可以选择抛出一个错误或进行其他处理  
				}

				return statusText;
			},
		}
	}
</script>

<style>
	.head {
		height: 70rpx;
		background-color: #ffffff;
	}

	.user-info-box {
		background-color: #fff;
		padding-bottom: 40rpx;
	}

	.user-info-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 200rpx;
		background-color: #fff;
	}

	.avatar-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
	}

	.avatar-box .avatar {
		width: 116rpx;
		height: 116rpx;
		border-radius: 116rpx;
	}

	.avatar-box .avatar-text {
		padding-left: 20rpx;
	}

	.avatar-text .name {
		font-size: 50rpx;
		font-weight: 500;
		color: #1d1d1d;
	}

	.avatar-text .desc {
		color: #818380;
		padding-top: 10rpx;
		font-size: 30rpx;
	}

	.arrow-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 115rpx;
	}

	.qr-code image {
		width: 25rpx;
		height: 25rpx;
	}

	.arrow {
		width: 20rpx;
		height: 20rpx;
		border-top: 3rpx solid #a9acb3;
		border-right: 3rpx solid #a9acb3;
		transform: rotate(45deg);
		margin-right: 40rpx;
	}

	.user-status {
		display: flex;
	}

	.label {
		border: 1px solid #cdcdcd;
		border-radius: 30rpx;
		font-size: 25rpx;
		color: #767676;
		padding: 6rpx 15rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.label .add {
		font-size: 28rpx;
		margin-right: 8rpx;
	}

	.label-avatar {
		margin-right: 8rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.label-avatar image {
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}

	.label:nth-child(1) {
		margin-left: 150rpx;
	}

	.label:nth-child(2) {
		margin-left: 15rpx;
	}

	.label-friends {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.status .add {
		margin-right: 2rpx;
	}

	/* 菜单区域 */
	.menu-box {
		box-shadow: 0 0px 20px rgba(231, 231, 231, 0.6);
		border-radius: 16rpx;
		margin: 15rpx 0rpx 0 0rpx;
	}

	.menu-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #F6F6F6;
		padding: 30rpx;
		background-color: #ffffff;
	}

	.menu-item-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.menu-item-left image {
		width: 38rpx;
		height: 38rpx;
	}

	.menu-item-left-text {
		padding-left: 20rpx;
		font-size: 30rpx;
	}

	.arrow-right {
		width: 15rpx;
		height: 15rpx;
		border-top: 3rpx solid #a9acb3;
		border-right: 3rpx solid #a9acb3;
		transform: rotate(45deg);
	}
</style>